<template>
    <div class="wrapper">
        <div class="titel-row">
            <div class="home-icon">
                <img src="../../assets/inquiryRegister/home.png" alt>
            </div>
            <div class="title">事件记录</div>
        </div>
        <div class="content">
            <SearchHeader v-on:callback="onSearchCallback" v-bind:config="searchConfig" />
            <div class="table-wrapper">
                <el-table v-on:cell-click="onClickRow" :row-class-name="tableRowClassName" stripe ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" row-key="id">
                    <!-- <el-table-column type="selection" width="55"></el-table-column> -->
                    <el-table-column v-for="(item,index) in thConfig" :key="index" v-bind:prop="item.prop" v-bind:label="item.label"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-tooltip content="查看" placement="top">
                                <el-button v-on:click.stop.prevent="onDetail(scope.row)" icon="el-icon-search" size="small" circle />
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <div class="handle-row">
                    <button v-on:click="openModal(item.type,{isCreate:true,item})" class="handle-btn" v-bind:class="[item.color]" v-for="(item,index) in buttonConfig" :key="index" :disabled="item.type=='dispatch'&&(multipleSelection&&multipleSelection.length==0)">
                        <img :src="item.icon" alt>
                        <span>{{item.name}}</span>
                    </button>
                </div> -->
            </div>
            <div class="pager">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listRequest.pageNum" :page-size="10" prev-text="上一页" next-text="下一页" layout="total, prev, pager, next" :total="total"></el-pagination>
            </div>
        </div>
        <AddDialog @callback="getList"/>
        <RegisterDialog title = "预审登记" v-on:onSubmit="onSubmit" />
        <ViewDetail width = "800px" :dialogVisible="detailVisible" @onClose="detailVisible=false" :list="detailData" :columns="detailColumns" />
        <RejectDialog title = "预审登记" :dialogVisible="rejectVisible" @onClose="rejectVisible=false" @callBack="rejectcallBack" :record="rejectItem" />
    </div>
</template>

<script>
import SearchHeader from "../../components/layout/searchHeader.vue"; //搜索栏
import AddDialog from "../../components/incidentRegister/addDialog.vue"; //新增dialog
import { Popover, ViewDetail } from "../../components/common"; //小弹窗
import RejectDialog from "../../components/inquiryRegister/rejectDialog.vue"; //驳回弹窗
import RegisterDialog from "../../components/common/registerDialog.vue"; //预审登记弹窗
import Pubsub from "../../utils/pubsub";
const addIcon = require("../../assets/inquiryRegister/add.png");
const editIcon = require("../../assets/inquiryRegister/edit.png");
const deleteIcon = require("../../assets/inquiryRegister/delete.png");
const dispatchIcon = require("../../assets/inquiryRegister/dispatch.png");
const rejectIcon = require("../../assets/inquiryRegister/reject.png");
import {
    ZHZXEventInfoQueryRecord,
    deletePretrial,
    tyAddHandle,
    findByDictCode,
    tyEditHandle,
    distribute
} from "../../config/api.js";
import {
    getTimeStr
} from "../../utils";
export default {
    components: {
        SearchHeader,
        AddDialog,
        RegisterDialog,
        Popover,
        ViewDetail,
        RejectDialog
    },
    data() {
        return {
            // currentPageNum:1,
            listRequest: { pageNum: 1, pageSize: 10 }, //列表请求餐来
            detailVisible: false, //详情窗口显示隐藏
            rejectVisible: false, //驳回窗口显示隐藏
            detailData: {}, //详情数据
            rejectItem: {}, //驳回项的数据
            areaCode: [], //数据字典返回值--区域
            multipleSelection: [], //选中的项
            total: 0, //共多少条
            handleType: "", //操作预审登记状态，add为新增，edit为编辑。
            currentRow: {}, //当前操作的项
            thConfig: [
                // { prop: "ems", label: "快递编码" },
                { prop: "eventNumber", label: "事件编码" },
                { prop: "eventTitle", label: "事件标题" },
                { prop: "eventTypeName", label: "事件类别" },
                { prop: "eventSourceCodeName", label: "事件来源" },
                { prop: "reporterName", label: "上报人" },
                { prop: "telNo", label: "上报人电话" },
                { prop: "createTime", label: "上报时间" },
                { prop: "disposalUnitCodeName", label: "处置单位" },
                { prop: "receiveTime", label: "处置时间" },
                { prop: "finishPeronName", label: "结案人" },
                { prop: "finishTime", label: "结案时间" },
            ], //table头部配置
            tableData: [],
            buttonConfig: [
                {
                    name: "新增",
                    icon: addIcon,
                    type: "addincidentRegister",
                    color: "main"
                },
                {
                    name: "分发",
                    icon: dispatchIcon,
                    type: "dispatch",
                    color: "green"
                }
                // {name:"修改",icon:editIcon,type:"edit",color:"green"},
                // {name:"删除",icon:deleteIcon,type:"delete",color:"default"},
                // {name:"驳回",icon:rejectIcon,type:"reject",color:"default"},
            ],
            searchConfig: [
                //搜索栏配置
                {
                    label: "事件标题",
                    code: "keyword",
                    type: "search",
                    value: ""
                },
                // {
                //     label: "当前状态",
                //     code: "status",
                //     type: "radio",
                //     value: "",
                //     data: [
                //         { name: "全部", value: "", active: true },
                //         { name: "未上报", value: "0", active: false },
                //         { name: "待接收", value: "1", active: false },
                //         { name: "待办结", value: "2", active: false }
                //     ]
                // },
                {
                    label: "上报时间",
                    code: ["startTime", "endTime"],
                    type: "rangePicker",
                    value: ""
                },
                {
                    label: "所属类别",
                    code: "eventType",
                    type: "radio",
                    value: "",
                    data: [
                        { name: "全部", value: "", active: true },
                        { name: "投诉举报", value: "1", active: false },
                        { name: "咨询求助", value: "2", active: false },
                        { name: "意见建议", value: "3", active: false },
                        { name: "表彰表扬", value: "4", active: false },
                    ]
                },
            ],
            detailColumns: [
                {
                    title: "事件编码",
                    dataIndex: "eventNumber"
                },
                {
                    title: "事件标题",
                    dataIndex: "eventTitle"
                },
                {
                    title: "事件类别",
                    dataIndex: "eventTypeName"
                },
                {
                    title: "事件来源",
                    dataIndex: "eventSourceCodeName"
                },
                {
                    title: "上报人",
                    dataIndex: "reporterName"
                },
                {
                    title: "上报人电话",
                    dataIndex: "telNo"
                },
                {
                    title: "上报时间",
                    dataIndex: "createTime"
                },
                {
                    title: "处置单位",
                    dataIndex: "disposalUnitCodeName"
                },
                {
                    title: "处置时间",
                    dataIndex: "disposalUnitCodeName"
                },
                {
                    title: "结案人",
                    dataIndex: "finishPeronName"
                },
                {
                    title: "结案时间",
                    dataIndex: "finishTime"
                },
                {
                    title: "事件描述",
                    dataIndex: "eventDesc"
                },
                {
                    title: "事件关键词",
                    dataIndex: "eventKeyword"
                },
            ]
        };
    },
    methods: {
        //新增确定按钮回调函数
        onSubmit(request) {
            if (this.handleType === "add") {
                tyAddHandle(request).then(() => {
                    this.$message({
                        message: "新增成功",
                        type: "success"
                    });
                    this.getList();
                    Pubsub.publish("hideRegisterDialog");
                });
            } else {
                request.id = this.currentRow.id;
                tyEditHandle(request).then(() => {
                    this.$message({
                        message: "编辑成功",
                        type: "success"
                    });
                    this.getList();
                    Pubsub.publish("hideRegisterDialog");
                });
            }
        },
        /**
         * 搜索栏回调
         */
        onSearchCallback(re = {}) {
            let request = Object.assign(this.listRequest, re);
            this.listRequest = request;
            this.getList();
        },
        /**
         * 设置table某一项class
         */
        tableRowClassName({ row, rowIndex }) {
            // if (rowIndex === 2) {
            //   return "warning-row";
            // }
            if (rowIndex % 2 === 0) {
                return "even-row";
            } else {
                return "odd-row";
            }
        },
        /**
         * 设置选中项
         */
        handleSelectionChange(e = []) {
            if (e.length) {
                e.map(item => {
                    this.multipleSelection.push(item.id);
                });
            } else {
                this.multipleSelection = [];
            }
        },
        /**
         * 查看详情
         */
        onDetail(e) {
            // this.detailData=e||{};//传参
            this.detailData = e || {}; //传参
            this.detailVisible = true;
        },
        /**
         * 编辑
         */
        onEdit(e) {
            this.handleType = "edit";
            this.currentRow = e;
            Pubsub.publish("showRegisterDialog", {
                type: "tysl",
                handleType: "add",
                ...e
            });
        },
        //删除，不需要任何事件，只为处理事件冒泡。
        onDelete(){

        },
        /**
         * 
         *确认 删除
         */
        deleteHandler(e) {
            deletePretrial({ id: e.id }).then((res = {}) => {
                this.$message({
                    message: "删除成功",
                    type: "success"
                });
                this.getList();
            });
        },
        /**
         * 驳回
         */
        rejectHandler(e) {
            this.rejectItem = e;
            this.rejectVisible = true;
        },
        /**
         * 驳回-回调
         */
        rejectcallBack(e) {
            this.rejectVisible = false;
            this.getList();
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.listRequest.pageNum = val;
            this.getList();
        },
        /**
         * 操作按钮点击事件
         */
        openModal(type, values) {
            if (type == "dispatch") {
                this.dispatch(values);
                return;
            } else {
                this.handleType = "add"; //新增
            }
            Pubsub.publish(type, { type: "tysl", handleType: "add" });
        },
        getList() {
            ZHZXEventInfoQueryRecord(this.listRequest).then((res = {}) => {
                if(res.rows&&res.rows.length){
                    res.rows.map(item=>{
                        item.createTime=getTimeStr(item.createTime||'');
                        item.finishTime=getTimeStr(item.finishTime||'');
                        item.receiveTime=getTimeStr(item.receiveTime||'');
                    })
                }
                this.tableData = res.rows||[];
                
                this.total = res.total || 0;
            });
        },
        dispatch(values) {
            this.$confirm("请确认是否分发?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    distribute({ ids: this.multipleSelection }).then(
                        (res = {}) => {
                            this.$message({
                                type: "success",
                                message: "分发成功!"
                            });
                            this.multipleSelection = [];
                            this.getList();
                        }
                    );
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消"
                    });
                });
        },
        /**
         * 获取数据字典--区域
         */
        // getDictCode() {
        //     findByDictCode({ dictCode: "areaCode" }).then((res = {}) => {
        //         if (res.data && res.data.length) {
        //             this.areaCode = res.data || [];
        //             res.data.map(item => {
        //                 this.searchConfig[3].data.push({
        //                     name: item.dictDataName,
        //                     value: item.dictDataCode,
        //                     active: false
        //                 });
        //             });
        //         }
        //     });
        // },
        /**
         * 点击table row
         */
        onClickRow(row) {
            this.$refs.multipleTable.toggleRowSelection(row);
        }
    },
    created() {
        this.getList();
        // this.getDictCode();
    }
};
</script>

<style lang = "scss" scoped>
.wrapper {
    margin: 20px;
    background: #fff;
}
.titel-row {
    display: flex;
    align-items: center;
    .home-icon {
        height: 50px;
        width: 50px;
        background: #1a36a9;
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .title {
        font-size: 22px;
        color: #272c67;
    }
}
.content {
    padding: 0 20px 80px 20px;
}
.pager {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}
.table-wrapper {
    position: relative;
    margin-top: 46px;
    .handle-row {
        position: absolute;
        top: -40px;
        right: 0;
        display: flex;
        justify-content: flex-end;
    }
    .handle-btn {
        width: 76px;
        height: 30px;
        border-radius: 3px;
        margin-right: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            margin-right: 10px;
        }
        &:last-child {
            margin-right: 0;
        }
        &:active {
            opacity: 0.8;
        }
        &.main {
            background: #1a36a9;
            color: #fff;
        }
        &.green {
            background: #007130;
            color: #fff;
        }
        &.default {
            background: #e5e5e5;
        }
        &:disabled {
            background: #999;
            opacity: 1;
        }
    }
}
</style>
<style>
</style>
